<template>
  <div>
    <el-descriptions
        class="margin-top"
        title="管理员信息"
        :column="3"
        border
    >
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon >
              <tickets />
            </el-icon>
            编号
          </div>
        </template>
        <el-tag size="small">{{ ManagerData.id }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon >
              <user />
            </el-icon>
            用户名
          </div>
        </template>
        {{ ManagerData.username }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon >
              <user />
            </el-icon>
            昵称
          </div>
        </template>
        {{ ManagerData.nickname }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon><Lock />
            </el-icon>
            密码
          </div>
        </template>
        {{ ManagerData.password }}
      </el-descriptions-item>
    </el-descriptions>

  </div>

</template>
<script >
import { useStore } from 'vuex';
import {computed} from "vue";
export default {
  setup() {
    const store = useStore();
    const  ManagerData = computed(() => store.state.manager.info);
    return {
      ManagerData
    };
  }
}
</script>

<style scoped>

</style>